<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<jsp:include page="Redir.jsp"></jsp:include>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<link href="<c:url value='/css/default.css'/>" rel="stylesheet"
	type="text/css" />
<head>
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="js/jquery-1.8.3.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="scripts/NumericOnly.js"></script>
<fmt:setBundle basename="lang.message" />
<c:set var="t" value="true" />
<title><fmt:message key="showfacility.title" /></title>
<script src="js/jquery-ui.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#type").change(function() {
			window.location.href = "ProcessBooking?type=" + $(this).val();
		});
	});
</script>
<script type="text/javascript">
	$(function() {
		$("#startDate").datepicker({
			dateFormat : "dd-M-yy",
			minDate : "Now",
			changeMonth : true,
			numberOfMonths : 1,
			onClose : function(selectedDate) {
				$("#endDate").datepicker("option", "minDate", selectedDate);
			}
		});
		$("#endDate").datepicker({
			dateFormat : "dd-M-yy",
			defaultDate : "Now",
			changeMonth : true,
			numberOfMonths : 1,
			minDate : $("#startDate").val(),
			onClose : function(selectedDate) {
				$("#startDate").datepicker(selectedDate);
			}
		});
	});
</script>
<script type="text/javascript">
	(function($, W, D) {
		var JQUERY = {};

		JQUERY.UTIL = {
			setupFormValidation : function() {

				//form validation rules
				$("#FacitliyForm").validate({
					rules : {
						name : "required",
						description : "required",
						type : "required",
						seatingCapacity : "required",
						status : "required"

					},
					messages : {
						name : "Please enter your name",
						description : "Please enter description",
						type : "Please enter type",
						seatingCapacity : "Please enter Seating Capacity",
						status : "Please enter Status"
					},
					submitHandler : function(form) {
						form.submit();
					}
				});
			}
		}

		//when the dom has loaded setup form validation rules document.createElement('script');
		//window.jQuery.fn.jquery------ $("#id").functionname(function(){........});
		$(D).ready(function($) {
			JQUERY.UTIL.setupFormValidation();
		});

	})(jQuery, window, document);
</script>


</head>

<body>
	<%@include file="Header.jsp"%>
	<div id="wrapper">
		<div id="page-wrapper">
			<div id="page">
				<%@include file="Menu.jsp"%>
				<div id="content">
					<form action="ProcessBooking" method="post" id="FacitliyForm">
						<h2>
							<fmt:message key="label.booking" />
						</h2>

						<table class="table-form">
							<tr>
								<td><fmt:message key="label.facility.type" /></td>
								<td><select name="type" id="type">
										<option value="ClassRoom"
											${type == 'ClassRoom' ? 'selected="selected"' : '' }>Class
											Room</option>
										<option value="DiscussionRoom"
											${type == 'DiscussionRoom' ? 'selected="selected"' : '' }>Discussion
											Room</option>
										<option value="MeetingRoom"
											${type == 'MeetingRoom' ? 'selected="selected"' : '' }>Meeting
											Room</option>
										<option value="MSPH"
											${type == 'MSPH' ? 'selected="selected"' : '' }>Multi-Purpose-Hall</option>
								</select></td>
							</tr>
							<tr>
								<td><fmt:message key="label.booking.facilityName" /></td>
								<td><select name="facility">
										<c:forEach items="${facilities}" var="fac">
											<option value="${fac.name}"
												${empty booking.facilityName || booking.facilityName == fac.name ? 'selected="selected"' : '' }>${fac.name}</option>
										</c:forEach>
								</select></td>
							</tr>
							<c:if test="${not empty error.errorFacility}">
								<tr>
									<td></td>
									<td style="color: red;">${error.errorFacility}</td>
								</tr>
							</c:if>
							<tr>
								<td><fmt:message key="label.booking.startDate" /></td>
								<td><fmt:formatDate value="${booking.startDate}"
										var="start" pattern="dd-MMM-yyyy" /> <input type="text"
									name="startDate" id="startDate" readonly="readonly"
									value="${start}" size=15 maxlength=12 /></td>
							</tr>
							<c:if test="${not empty error.errorStartDate}">
								<tr>
									<td></td>
									<td style="color: red;">${error.errorStartDate}</td>
								</tr>
							</c:if>
							<tr>
								<td><fmt:message key="label.booking.endDate" /></td>
								<td><fmt:formatDate value="${booking.endDate}" var="end"
										pattern="dd-MMM-yyyy" /> <input type="text" name="endDate"
									id="endDate" readonly="readonly" value="${end}" size=15
									maxlength=12 /></td>
							</tr>
							<c:if test="${not empty error.errorEndDate}">
								<tr>
									<td></td>
									<td style="color: red;">${error.errorEndDate}</td>
								</tr>
							</c:if>
							<tr>
								<td><fmt:message key="label.booking.priority" /></td>
								<td><select name="priority">
										<c:forEach items="${priorities}" var="pr">
											<option value="${pr.code}"
												${pr.code == booking.priority ? 'selected="selected"' : '' }>${pr.level}</option>
										</c:forEach>
								</select></td>
							</tr>
							<c:if test="${not empty error.errorPriority}">
								<tr>
									<td></td>
									<td style="color: red;">${error.errorPriority}</td>
								</tr>
							</c:if>
							<tr>
								<td><fmt:message key="label.booking.userId" /></td>
								<td><input name="userId" type="hidden"
									value="${sessionScope.user.id}" readonly="readonly" /><input
									type="text" value="${sessionScope.user.name}"
									readonly="readonly" /></td>
							</tr>
							<tr>
								<td><fmt:message key="label.booking.contactDetail" /></td>
								<td><input name="contactDetail" type="text"
									value="${booking.contactDetail}" /></td>
							</tr>
							<c:if test="${not empty error.errorContactDetail}">
								<tr>
									<td></td>
									<td style="color: red;">${error.errorContactDetail}</td>
								</tr>
							</c:if>
							<tr>
								<td><fmt:message key="label.booking.emergency" /></td>
								<td><input name="emergency" type="checkbox"
									value="true" ${booking.emergency == "true" ? 'checked="checked"' : '' } />Emergency</td>
							</tr>
							<tr>
								<td><fmt:message key="label.booking.reason" /></td>
								<td><textarea name="reason" cols="20" rows="5">${booking.reason}</textarea></td>
							</tr>
							<c:if test="${not empty error.errorReason}">
								<tr>
									<td></td>
									<td style="color: red;">${error.errorReason}</td>
								</tr>
							</c:if>
							<c:if test="${not empty error.errorGeneral}">
								<tr>
									<td colspan="2" style="color: red;">${error.errorGeneral}</td>
								</tr>
							</c:if>
						</table>

						<input type="submit" value="Submit" class="button-style">
						<input type="reset" value="Reset" class="button-style-cancel">
					</form>
				</div>


			</div>
		</div>
	</div>
	<%@include file="Footer.jsp"%>
</body>
</html>